<!DOCTYPE html>
<html lang="zh_CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>核心考点</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport"
		content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!-- 固定的css 和 common.js 的引用    -->
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
	<script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>

	<!-- <link rel="stylesheet" href="../../css/sm.min.css">
	<link rel="stylesheet" href="../../css/common.css"> -->
	<!-- <script type="text/javascript" src="../../common/common/common.js"></script> -->

	<!-- <script type="text/javascript"
		src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
	<script>
		var vConsole = new VConsole();
	</script> -->



	<style type="text/css">
		.container {
			box-sizing: border-box;
			height: 100%;
			overflow-y: scroll;
			padding-bottom: 2.5rem;
			-webkit-overflow-scrolling: touch;
		}

		.book-top {
			box-sizing: border-box;
			display: flex;
			width: 100%;
			padding: 0.5rem 0.75rem;
			background: #fff;
		}

		.book-top .book-img {
			width: 4.81rem;
			height: 6.35rem;
		}

		.book-top .book-img img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			border-radius: 0.2rem;
		}

		.book-top .book-content {
			flex: 1;
			margin-left: 0.5rem;
		}

		.book-top .book-content .book-title {
			font-size: 1.1rem;
		}

		.book-content .author {
			color: #2EC8F6;
			font-size: 0.75rem;
		}

		.book-content .book-count,
		.book-price {
			color: #999;
			font-size: 0.75rem;
		}

		.book-info {
			position: relative;
			font-size: 0.75rem;
			color: #808080;
			padding: 0.5rem 0.75rem;
			background: #fff;
		}

		.book-info-start::after {
			content: ' ';
			position: absolute;
			bottom: 0.85rem;
			right: 0.5rem;
			border: 0.3rem solid transparent;
			border-top: 0.3rem solid #909399;
		}

		.book-info-end::after {
			border: 0.3rem solid transparent;
			border-bottom: 0.3rem solid #909399;
		} 

		.book-info .text {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		.list-wrap {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			box-sizing: border-box;
			padding: 0.5rem 0.75rem;
			overflow: hidden;
		}

		.list-wrap::after {
			content: ' ';
			position: absolute;
			top: 0;
			left: -50%;
			right: -50%;
			border: 1px solid #EBEEF5;
			transform: scale(0.5);
			pointer-events: none;
		}

		.list-wrap:active {
			background-color: #f5f5f5;
		}

		.list-content {
			display: flex;
			align-items: center;
		}

		.list-label,
		.book-label {
			font-size: 0.7rem;
			color: #999;
			margin-left: 0.5rem;
		}

		.arrow-right {
			font-size: 0.7rem;
			color: #999;
		}

		.read-box {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 2.5rem;
			z-index: 1000;
			padding-top: 0.25rem;
			background: #fff;
		}

		.read-box .button {
			width: 50%;
			height: 2rem;
			border-radius: 2rem;
			line-height: 2rem;
			/* background-color: #2EC8F6; */
			background-color: #2EC8F6;
			margin: auto;
		}
	</style>


</head>

<body>
	<div class="page-group">
		<div class="page page-current">
			<div class="container">
				<div class="book-top">
					<div class="book-img">
						<img src="" alt="">
					</div>
					<div class="book-content">
						<div class="book-title"></div>
						<div class="author"></div>
						<div class="book-count"></div>
						<div class="book-price"></div>
					</div>
				</div>

				<div class="book-info">
					<div class="book-desc"></div>
				</div>

				<div class="list-wrap">
					<div class="list-content">
						<div class="list-title">查看目录</div>
						<div class="list-label"></div>
					</div>
					<div class="arrow-right">
						<span class="icon icon-right"></span>
					</div>
				</div>

				<div class="read-box">
					<a href="#" class="button button-fill read-btn"></a>
				</div>
			</div>
		</div>
	</div>




	<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
	<script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>

	<!-- <script type="text/javascript"
		src="../../js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript'
		src='../../zepto/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='../../js/js/sm.min.js'
		charset='utf-8'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script> -->

	<!-- <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js' charset='utf-8'></script> -->
	<!-- <script src="http://47.104.254.28/commonfile/js/js/swiper/swiper.min.js"></script> -->

	<script type="text/javascript">
		var book = null;

		$$('.list-wrap').on('click', function () {
			let values = {
				type: 'bookOrderList',
				book_id: String(book.id),
				book_pdf: book.book_pdf,
				book_text_file: book.book_text_file
			}
			send_data(values);
		});

		$$('.read-box').on('click', function () {
			let values = {
				type: 'readBook',
				book_id: String(book.id),
				is_buy: String(book.is_buy),
				book_price: String(book.book_price),
				book_pdf: book.book_pdf,
				book_name: book.book_name,
				read_book_type: book.read_book_type,
				book_text_file:book.book_text_file,
				book_text:book.book_text
			}
			send_data(values);
		});

		function successCallBack(data) {
			if (!data.success) {
				$.toast(data.message, 1500);
			}
			if (isNotNull(data.data)) {
				book = data.data[0];
				$$('.book-img img').attr('src', book.book_img);
				$$('.book-title').text(book.book_name);
				$$('.author').text('作者：' + book.author);
				$$('.book-count').text('字数：' + book.word_count);
				if (book.book_price > 0) {
					$$('.book-price').text('价格：' + book.book_price);
				} else {
					$$('.book-price').text('免费');
				}
				$$('.book-info').text(book.book_description);
				$$('.list-label').text('共' + book.chapter_count + '章');

				if (book.is_buy == 1 || book.book_price == 0) {
					$$('.read-btn').text('学习');
				} else {
					$$('.read-btn').text('购买');
				}

				let height = parseInt($$('.book-desc').css('font-size')) * 3 * 1.5;
				if ($$('.book-desc').height() > height) {
					$$('.book-desc').addClass('text');
					$$('.book-info').addClass('book-info-start');
				}

				let values = {
					type: 'setShareImg',
					url: book.book_img
				}
				send_data(values);
			}
		}

		$$('.book-info').on('click', function() {
			if (!$$(this).hasClass('book-info-start')) {
				return false;
			}
			if ($$(this).hasClass('book-info-end')) {
				$$('.book-desc').addClass('text');
				$$(this).removeClass('book-info-end');
				return false;
			}

			$$(this).addClass('book-info-end');
			$$('.book-desc').removeClass('text');
		})

		function errorCallBack(data) {
			console.log(data)
		}

		function getParams(data) {
			//	data需要转成json调用 ，函数urlParamParseJson();
			var jsonData = urlParamParseJson(data);
			if (!isNotNull(jsonData.book_id)) {
				$$('.container').hide();
				return false;
			}
			var params = {
				book_id: jsonData.book_id
				// book_id: jsonData.book_id || 10
			}

			net_request('get', 'api/v1/books', params, successCallBack, errorCallBack);
		}

		$$(function () {
			$.init();
		});
	</script>
</body>

</html>